$rubyred = #eb5757
$purp = #9b51e0
$bluetopaz = #58cbf2

:root
  --vp-c-brand-lighter: lighten($purp, 30%);
  --vp-c-brand-light: lighten($purp, 20%);
  --vp-c-brand: $purp;
  --vp-c-brand-dark: darken($purp, 0%);
  --vp-c-brand-darker: darken($purp, 10%);

.nav-bar-title .logo
  height: 2rem;  

ul.example-list 
  margin 0
  padding 0
  overflow auto
  &.horizontal
    display flex

.example-list-item
  list-style-type none
  display flex
  align-items center
  padding 10px 20px
  margin 10px
  border-radius 10px
  font-weight bold
  background white
  box-shadow inset 0 0 0 3px rgba(0, 0, 0, 0.1), 1px 2px 5px rgba(0, 0, 0, 0.15)
  background $purp
  color white
  line-height 1.4
  user-select none

// Drag handle
.example-drag-handle
  display inline-block
  width 25px
  height 25px
  background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 L 0 7.5 z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 L 0 22.5 z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 L 0 37.5 z' color='white'%3E%3C/path%3E%3C/svg%3E")
  background-size contain
  background-repeat no-repeat
  opacity 0.5
  margin-right 10px
  cursor: grab

h4
  margin-top 1em


.doc-button
  padding: 5px 15px;
  background: white;
  color: var(--vp-c-brand);
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: inherit;

  &:hover
    background: #eee;

  &:active
    background: #ccc;

  &.space-start
    margin-inline-start: auto;

.kanban-page
  max-width: 0

.inline-badge
  > p
    display flex
    gap 1rem